<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ActiveTargetTest</title>
    <script type="text/javascript" src="../../../../montage.js" data-package="../../../"></script>
    <script type="text/montage-serialization">
        {
            "test": {
                "prototype": "spec/events/active-target-test/active-target-test",
                "values": {
                    "identifier": "ApplicationDelegate",
                    "targetChainRangeController": {"@": "targetChainRangeController"}
                },
                "listeners": [
                    {
                        "type": "keyPress",
                        "listener": {"@": "test"}
                    }
                ]
            },

            "application": {
                "prototype": "montage/core/application",
                "values": {
                    "delegate": {"@": "test"}
                }
            },

            "shortcutComposer": {
                "prototype": "montage/composer/key-composer",
                "values": {
                    "identifier:": "shortcut",
                    "keys": "f",
                    "component": {"@": "application"}
                },
                "listeners": [
                    {
                        "type": "keyPress",
                        "listener": {"@": "test"}
                    }
                ]
            },

            "menu": {
                "prototype": "spec/events/active-target-test/menu",
                "values": {
                    "element": {"@": "menu"}
                }
            },

            "fooMenu": {
                "prototype": "spec/events/active-target-test/menu-item",
                "values": {
                    "element": {"#": "fooMenu"},
                    "menu": {"@": "menu"}
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "menu"}
                    }
                ]
            },

            "barMenu": {
                "prototype": "spec/events/active-target-test/menu-item",
                "values": {
                    "element": {"#": "barMenu"},
                    "menu": {"@": "menu"}
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "menu"}
                    }
                ]
            },

            "C0": {
                "prototype": "spec/events/active-target-test/action-counter",
                "values": {
                    "element": {"#": "C0"}
                }
            },

            "C0Count": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "C0Count"},
                    "value": {"<-": "@C0.handledMenuActionCount"}
                }
            },

            "C0C0": {
                "prototype": "spec/events/active-target-test/action-counter",
                "values": {
                    "element": {"#": "C0C0"},
                    "acceptsActiveTarget": true
                }
            },

            "C0C0Count": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "C0C0Count"},
                    "value": {"<-": "@C0C0.handledMenuActionCount"}
                }
            },

            "C0C0B0": {
                "prototype": "montage/ui/component",
                "values": {
                    "element": {"#": "C0C0B0"},
                    "hasTemplate": false,
                    "acceptsActiveTarget": true,
                    "label": " Enabled Button"
                }
            },

            "C0C0B1": {
                "prototype": "montage/ui/component",
                "values": {
                    "element": {"#": "C0C0B1"},
                    "hasTemplate": false,
                    "acceptsActiveTarget": true,
                    "label": " Disabled Button",
                    "enabled": false
                }
            },

            "C0C1": {
                "prototype": "spec/events/active-target-test/action-counter",
                "values": {
                    "element": {"#": "C0C1"}
                }
            },

            "C0C1Count": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "C0C1Count"},
                    "value": {"<-": "@C0C1.handledMenuActionCount"}
                }
            },

            "C0C1B0": {
                "prototype": "montage/ui/component",
                "values": {
                    "element": {"#": "C0C1B0"},
                    "hasTemplate": false,
                    "acceptsActiveTarget": true,
                    "label": " Enabled Button"
                }
            },

            "C0C1B1": {
                "prototype": "montage/ui/component",
                "values": {
                    "element": {"#": "C0C1B1"},
                    "hasTemplate": false,
                    "acceptsActiveTarget": true,
                    "label": " Enabled Button Input"
                }
            },

            "C0C1B2": {
                "prototype": "montage/ui/component",
                "values": {
                    "element": {"#": "C0C1B2"},
                    "hasTemplate": false,
                    "acceptsActiveTarget": true,
                    "label": " Disabled Button",
                    "enabled": false
                }
            },

            "C0C2": {
                "prototype": "spec/events/active-target-test/action-counter",
                "values": {
                    "element": {"#": "C0C2"},
                    "hasTemplate": false,
                    "acceptsActiveTarget": true,
                    "nextTarget": {"@": "C0C2Controller"}
                }
            },

            "C0C2Controller": {
                "prototype": "montage/core/target",
                "values": {
                    "nextTarget": {"@": "C1"}
                }
            },

            "C1": {
                "prototype": "spec/events/active-target-test/action-counter",
                "values": {
                    "element": {"#": "C1"}
                }
            },

            "C1Count": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "C1Count"},
                    "value": {"<-": "@C1.handledMenuActionCount"}
                }
            },

            "targetInfoConverter": {
                "prototype": "spec/events/active-target-test/target-info-converter"
            },

            "activeTargetObjectName": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "activeTargetObjectName"},
                    "value": {
                        "<-": "eventManager.activeTarget",
                        "converter": {"@": "targetInfoConverter"}
                    }
                }
            },

            "activeTargetIdentifier": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "activeTargetIdentifier"},
                    "value": {
                        "<-": "eventManager.activeTarget.identifier"
                    }
                }
            },

            "targetChainController": {
                "prototype": "spec/events/active-target-test/target-chain-controller",
                "values": {
                    "content": {"<-": "@activeTargetObjectName.eventManager.activeTarget"}
                }
            },

            "targetChainRangeController": {
                "prototype": "montage/core/range-controller",
                "values": {
                    "content": {"<-": "@targetChainController.organizedContent"}
                }
            },

            "targetRepetition": {
                "prototype": "montage/ui/repetition.reel",
                "values": {
                    "element": {"#": "targetRepetition"},
                    "contentController": {"<-": "@test.targetChainRangeController"}
                }
            },

            "targetObjectName": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "targetObjectName"},
                    "value": {
                        "<-": "@targetRepetition:iteration.object",
                        "converter": {"@": "targetInfoConverter"}
                    }
                }
            },

            "targetIdentifier": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "targetIdentifier"},
                    "value": {
                        "<-": "@targetRepetition:iteration.object.identifier"
                    }
                }
            }
        }
    </script>

    <style type="text/css">
        body {
            background: hsl(0,0%,95%);
        }

        .container {
            margin: 1em;
            padding: 1em;
            background-color: hsla(0,0%,0%, 0.1)
        }

        .playground {
            background: white;
            padding: 2em;
        }

        #targetInfo {
            position: fixed;
            top: 0;
            right: 0;
            background-color: hsla(0,0%,100%, 0.96);
            padding: 1em;
            pointer-events: none;
        }

    </style>

</head>
<body>
    <h1>Testing ActiveTarget…</h1>

    <menu data-montage-id="menu">
        <p>To fire a focused event, press the 'f' key.</p>

        <button data-montage-id="fooMenu">Foo</button>
        <button data-montage-id="barMenu">Bar</button>

        <div id="targetInfo">
            <h2>Information about the activeTarget</h2>
            <table>
                <tr>
                    <th>ObjectName</th>
                    <td data-montage-id="activeTargetObjectName"></td>
                </tr>
                <tr>
                    <th>Identifier</th>
                    <td data-montage-id="activeTargetIdentifier"></td>
                </tr>
            </table>

            <h2>Target Chain</h2>
            <ul data-montage-id="targetRepetition">
                <li>
                    <span data-montage-id="targetObjectName"></span>
                    <em data-montage-id="targetIdentifier"></em>
                </li>
            </ul>

        </div>

    </menu>

    <section class="playground">
        <p>All of the control-like-UI components below should become activeTarget when focused</p>

        <div data-montage-id="C0" class="container">
            C0
            <p>This component cannot become the activeTarget</p>
            <p>Handled MenuAction Count <span data-montage-id="C0Count"></span></p>

            <div data-montage-id="C0C0" class="container">
                C0C0
                <p>The component can become the activeTarget</p>
                <p>Handled MenuAction Count <span data-montage-id="C0C0Count"></span></p>

                <button data-montage-id="C0C0B0"></button>
                <button data-montage-id="C0C0B1"></button>
                <input type="checkbox" data-montage-id="C0C0CB0">

                These HTML controls are not Montage Target (The nearest parent component should be considered active)
                <div>
                    <select>
                        <option>Not a Component</option>
                    </select>
                    <button>Not a Component</button>
                </div>
            </div>

            <div data-montage-id="C0C1" class="container">
                C0C1
                <p>This component cannot become the activeTarget</p>
                <p>Handled MenuAction Count <span data-montage-id="C0C1Count"></span></p>

                <button data-montage-id="C0C1B0"></button>
                <input type="button" data-montage-id="C0C1B1">
                <button data-montage-id="C0C1B2"></button>
                <textarea data-montage-id="C0C1TA0"></textarea>
            </div>

            <div data-montage-id="C0C2" class="container">
                C0C2
                This container accepts focus but has its nextTarget set as a Target other than the natural DOM based component hierarchy
                The next Target is not a visual component, but does specify that it's next target is a component in this document,
                but in a different part of the hierarchy. Just for fun.
            </div>
        </div>

        <div data-montage-id="C1" class="container">
            C1
            And here's that component with no children that happens to be along the event target chain of another component (C0C2)
            <p>Handled MenuAction Count <span data-montage-id="C1Count"></span></p>
        </div>

    </section>

</body>
</html>
